<template>
  <Sticky :sticky-top="100">
    <el-card class="box-card">
      <el-row :gutter="24">
        <el-col :span="14">
          当前流程 :
          <el-select v-if="flowListStatus" v-model="flowId" placeholder="请选择" @change="initFlowNodeList">
            <el-option
              v-for="item in flowOptions"
              :key="item.flowId"
              :label="item.flowName"
              :value="item.flowId"
            />
          </el-select>
        &nbsp;&nbsp;{{ flowStatusMessage }}
          <el-select v-if="flowNodeStatus" v-model="nextNodeId" placeholder="请选择">
            <el-option
              v-for="item in nodeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="10" style="text-align: right">
          <el-button type="success" @click="initFlowStep">审核流程</el-button>
          
          <el-button v-if="!backButtonStatus" type="danger" @click="setForm('BACK')">{{ backBt }}</el-button>
          <el-button v-if="!sendFlowButtonStatus" type="primary" @click="setForm('ALLOW')">{{ sendBt }}</el-button>
          <slot />
        </el-col>
        <el-dialog :append-to-body="true" title="流程审批" :visible.sync="dialogVisible" style="margin: auto;z-index:10000">
          <div>
            <h4>{{ sendStatus | excheange }}</h4>
            <el-input
              v-model="message"
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
            />
          </div>
          <div slot="footer" class="dialog-footer" style="margin-right: 50px">
            <el-button :loading="sendLoading" @click="dialogVisible = false">
              取消
            </el-button>
            <el-button type="primary" :loading="sendLoading" @click="sendFlow">
              确认
            </el-button>
          </div>
        </el-dialog>
        <el-dialog :append-to-body="true" title="审核流程示意图" :visible.sync="stepDialogVisible" style="margin: auto;z-index:10000">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :color="activity.id === cid?'green':''"
            >
              {{ activity.name }}
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
      </el-row>
    </el-card>
  </Sticky>
</template>

<script>
import Sticky from '@/components/Sticky'
import { GetFlowInstanceInfo, GetFlowInstanceNextNode, SendFlow, GetFlowStep } from '@/api/SystemManagerApi'

const dic = {
  'ALLOW': '审批意见',
  'BACK': '驳回请求'
}

export default {
  name: 'FlowInfo',
  filters: {
    excheange(val) {
      return dic[val]
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Sticky },
  props: ['instanceId', 'sendButtonTitle', 'backButtonTitle'],
  data() {
    return {
      sendLoading: false,
      activities: [],
      sendStatus: 'ALLOW',
      flowStatusMessage: '下一审批节点 :',
      flowListStatus: false,
      flowNodeStatus: false,
      flowOptions: [],
      nodeOptions: [],
      flowId: null,
      currentNodeId: null,
      nextNodeId: null,
      message: null,
      menuId: this.$route.meta.id,
      dialogVisible: false,
      sendFlowButtonStatus: true,
      backButtonStatus: true,
      flowStatus: null,
      stepDialogVisible: false,
      cid: null,
      sendBt: '提交审核',
      backBt: '驳回申请'
    }
  },
  watch: {
    instanceId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            if (this.flowStatus === 'START') {
              this.showFlowSendButton()
            }
          })
        }
      }
    },
    backButtonTitle: {
      immediate: true,
      handler(val) {
        if (val) {
          this.backBt = val
        }
        //add by jiang 20210623 如果是拒绝标签名，隐藏
        if(val == "拒绝"){
          this.backButtonStatus = true          
        }
      }
    },
    sendButtonTitle: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.sendBt = val
          })
        }
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      GetFlowInstanceInfo(
        { menuId: this.menuId,
          instanceId: this.instanceId
        }).then((response) => {
        this.flowOptions = response.data.flowList
        this.cid = response.data.currentNodeId
        this.$nextTick(() => {
          if (this.flowOptions.length > 0) {
            this.flowId = this.flowOptions[0].flowId
            // 显示流程列表
            this.flowListStatus = true
            // END 审批结束
            this.flowStatus = response.data.flowStatus
            if (this.flowStatus === 'END') {
              this.hideFlowSendButton()
              this.$nextTick(() => {
                this.flowStatusMessage = '流程已办结'
                this.backButtonStatus = true
                this.flowNodeStatus = false
              })
              // START 初始节点
            } else if (this.flowStatus === 'START') {
              this.initFlowNodeList()
              // 开始节点 并且
              if (response.data.opreateStatus === 'Y' && this.instanceId) {
                this.showFlowSendButton()
                this.$nextTick(() => {
                  this.backButtonStatus = true
                })
              }
            } else {
              if (response.data.opreateStatus === 'N') {
                this.hideFlowSendButton()
              } else {
                this.showFlowSendButton()
                this.$nextTick(() => {
                  this.backButtonStatus = false
                })
              }
              // 初始化节点列表
              this.initFlowNodeList()
            }
            // 触发流程页面参数设置事件
            this.emitPageHandle(response.data.otherCode)
          }
        })
      })
    },
    showFlowSendButton() {
      this.$nextTick(() => {
        this.sendFlowButtonStatus = false
      })
    },
    hideFlowSendButton() {
      this.$nextTick(() => {
        this.sendFlowButtonStatus = true
      })
    },
    initFlowNodeList() {
      GetFlowInstanceNextNode({
        flowId: this.flowId,
        instanceId: this.instanceId }).then((response) => {
        this.nodeOptions = response.data
        this.$nextTick(() => {
          if (this.nodeOptions.length > 0) {
            if (this.currentNodeId === null) {
              this.nextNodeId = this.nodeOptions[0].id
            }
            this.flowNodeStatus = true
          }
        })
      })
    },
    emitPageHandle(otherCode) {
      this.$nextTick(() => {
        let stting = []

        if (otherCode) {
          stting = JSON.parse(otherCode.replace(/"true"/g, 'true').replace(/"false"/g, 'false'))
        }
        this.$emit('pageHandle', stting)
      })
    },
    sendFlow() {
      if (this.instanceId) {
        this.sendLoading = true
        SendFlow({ instanceId: this.instanceId,
          flowId: this.flowId,
          nextNodeId: this.nextNodeId,
          type: this.sendStatus,
          message: this.message }).then(() => {
          this.$emit('flowHandle', this.sendStatus)
          this.$nextTick(() => {
            this.initData()
            this.dialogVisible = false
          })
        })
      } else {
        this.$msgbox.alert('请保存信息后，进行该操作..')
        this.$nextTick(() => { this.dialogVisible = false })
      }
    },
    setForm(status) {
      this.sendStatus = status

      if (status === 'BACK') {
        this.$nextTick(() => {
          this.dialogVisible = true
        })
        return
      }

      this.$emit('onFlowSend', (isSend) => {
        if (isSend) {
          this.$nextTick(() => {
            this.dialogVisible = true
          })
        }
      })
    },
    initFlowStep() {
      GetFlowStep(this.flowId, this.instanceId).then((req) => {
        this.activities = req.data
        this.$nextTick(() => { this.stepDialogVisible = true })
      })
    }
  }
}
</script>

<style scoped>

</style>
